<template>
    <div>
        <p>{{name}}</p>
        <button @click="myFn1">按钮</button>
        <p>{{age}}</p>
        <button @click="myFn2">按钮</button>
    </div>
</template>

<script>
    /*
    setup执行时机,在beforecreate之前,所以这里面不能用this调用data.methods中的数据
    setup中的this是找不到的undefiend,只能是同步的不能是异步的
    */
    import {ref} from 'vue';


    export default {
        name: 'App',
        data: function () {
            return {
                name: 'ddk'
            }
        },
        methods: {
            myFn1() {
                alert('abc')
            }
        },
        setup() {

            let age = ref(18)

            function myFn2() {
                alert('123')
            }

            return {age, myFn2}
        }
    }

</script>

<style>

</style>
